import React, { Component } from 'react'
import Child from '../Child'
import './index.css'

class Parent extends Component {
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场8折',
      },
    ],
  }
  render() {
    // 循环 list 生成 Child 组件，把 list 中的每一个对象传递给 Child 组件
    const { list } = this.state
    return (
      <div className='parent'>
        {/* const item = { id: someProp, 'other-attr': otherProp } */}
        {/* <div :id="item.someProp" :otherAttr="item.otherProp"></div> */}
        {/* 和上面等价 */}
        {/* <div v-bind="item"></div> */}
        {/* {list.map((item) => (
          <Child
            key={item.id}
            id={item.id}
            name={item.name}
            price={item.price}
            info={item.info}
          />
        ))} */}
        {/* 和上面等价，对象传值的一种便捷写法，类似于 vue 中 v-bind */}
        {list.map((item) => (
          <Child key={item.id} {...item} />
        ))}
      </div>
    )
  }
}

export default Parent
